<template>
  <div class="app-container">
    <div
      style="display: flex; justify-content: space-between; align-items: center;margin-bottom: 20px;"
    >
      <div>
        显示参数类型:
        <el-select
          v-model="requestBody.type"
          placeholder="请选择"
          size="small"
          style="margin-right: 10px"
          @change="selectedShowChange"
        >
          <el-option value="templateType" label="话术类型"></el-option>
          <el-option value="answerType" label="跳转类型"></el-option>
          <el-option value="recorder" label="录音员"></el-option>
          <el-option value="variable" label="参数"></el-option>
          <el-option value="jzdj" label="降噪等级"></el-option>
          <el-option value="sbms" label="识别模式"></el-option>
          <el-option value="category" label="分类场景"></el-option>
        </el-select>
        值名称:
        <el-input
          v-model="requestBody.value"
          placeholder=""
          size="small"
          style="margin-right: 10px;width: 200px;"
        />
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="getParamData"
        >
          查询
        </el-button>
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click.native.prevent="handleAdd"
        >
          新增
        </el-button>
        <el-select
          v-if="requestBody.type == 'category' && requestBody.category == ''"
          v-model="requestBody.category"
          placeholder="查询分类下的应用场景"
          size="small"
          style="margin-left: 10px"
          @change="selectedShowChange"
        >
          <el-option
            v-for="item in data"
            :value="item.name"
            :label="item.name"
          ></el-option>
        </el-select>
        <el-button
          v-if="requestBody.type == 'category' && requestBody.category != ''"
          size="small"
          @click="backCategory"
        >
          返回分类查询
        </el-button>
        <span
          style="margin-left: 10px"
          v-if="requestBody.type == 'category' && requestBody.category != ''"
        >
          {{ this.requestBody.category }}分类：
        </span>
      </div>
    </div>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="值"></el-table-column>
      <el-table-column
        v-if="requestBody.type == 'recorder'"
        label="操作"
        align="center"
        width="250"
      >
        <template>
          <el-upload
            class="upload-audio"
            action="http://127.0.0.1:8080/api/audio/uploadAudio"
            :before-upload="beforeUpload"
            :on-success="uploadAudioSuccess"
            :accept="'.mp3'"
          >
            <el-button size="mini" type="primary">上传音频</el-button>
          </el-upload>
        </template>
      </el-table-column>
    </el-table>
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div style="display: flex;align-items: center;">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="selectedAll"
          @change="handleSelectAll"
        >
          当页全选
        </el-checkbox>
        <el-button
          style="margin-left: 10px"
          type="danger"
          @click.native.prevent="handleDelete"
        >
          删除
        </el-button>
      </div>
      <pagination
        style="flex-shrink: 0;"
        v-show="total > 0"
        :total="total"
        v-model:page="requestBody.pageNum"
        v-model:limit="requestBody.pageSize"
        @pagination="getParamData"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
// 修改图标 > 为 +
::v-deep .cell .el-icon-arrow-right:before {
  // content: "+";
  color: #1890ff;
  font-size: 20px;
  font-weight: 700px;
}

::v-deep .el-table__expand-icon .el-icon-arrow-right:before {
  content: '+';
}

// el-table表格对齐
// 对齐根节点 无论有无子节点
::v-deep(.el-table__row:not([class*='el-table__row--level-'])) {
  td:first-child {
    padding-left: 24px;
  }
}

// 修改展开之后的图标
::v-deep .el-table__expand-icon--expanded .el-icon-arrow-right:before {
  content: '-';
}

::v-deep .el-table__placeholder::before {
  margin-left: 20px;
}

// 修改子元素选择框的样式
::v-deep [class*='el-table__row--level-'] .el-checkbox__inner {
  display: none;
}

::v-deep .el-table__row--level-0 .el-checkbox__inner {
  display: inline-block;
}
</style>

<script>
import Pagination from '@/components/Pagination'
import waves from '@/directive/waves'
import axios from 'axios'
import { mapGetters } from 'vuex'
import { addType, deleteType, getParamData } from '@/api/talkTemplateBase/param'
import { updateStatusFALSE } from '@/api/template'

export default {
  components: { Pagination },
  directives: { waves },
  computed: {
    ...mapGetters(['roles']),
  },
  data() {
    return {
      // 获取到的话术模板数据
      data: [],
      total: 0,
      // 请求数据的请求对象
      requestBody: {
        type: 'templateType',
        value: '',
        category: '',
        pageNum: 1,
        pageSize: 10,
      },
      audio: '',
      audioName: '',
      selectedRows: [],
      selectedAll: false,
      isIndeterminate: false,
    }
  },
  created() {
    this.getParamData()
  },
  methods: {
    // 获取数据
    getParamData() {
      // console.log(开始获取数据)
      getParamData(this.requestBody).then(response => {
        console.log(response, '参数数据')
        this.data = response.data.content
        this.total = response.data.totalElements
        // this.total = 100
      })
    },
    handleSelectionChange(selection) {
      this.selectedRows = []
      for (let i = 0; i < selection.length; i++) {
        this.selectedRows.push(selection[i].id)
      }
      const isSelectedAll = this.selectedRows.length === this.data.length
      if (isSelectedAll) {
        this.selectedAll = isSelectedAll
        this.isIndeterminate = false
      } else {
        this.selectedAll = isSelectedAll
        if (this.selectedRows.length !== 0) {
          this.isIndeterminate = true
        } else {
          this.isIndeterminate = false
        }
      }
    },
    handleSelectAll(value) {
      this.selectedAll = value
      this.isIndeterminate = false
      if (value) {
        this.$refs.multipleTable.toggleAllSelection()
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    selectedShowChange() {
      this.getParamData()
    },
    handleDelete() {
      // console.log(this.selectedRows, '要删除的id')
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.requestBody.ids = this.selectedRows
          deleteType(this.requestBody).then(response => {
            this.$message.success('删除成功')
            this.getParamData()
          })
        })
        .catch(() => {
          this.$message.info('取消操作')
        })
    },
    handleAdd() {
      this.$prompt('请输入要添加的值', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          this.requestBody.value = value
          addType(this.requestBody).then(response => {
            this.requestBody.value = ''
            this.$message({
              type: 'success',
              message: '添加成功',
            })
            this.getParamData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入',
          })
        })
    },
    backCategory() {
      this.requestBody.value = ''
      this.requestBody.category = ''
      this.getParamData()
    },
    beforeUpload(audio) {
      const isMt10M = audio.size / 1024 / 1024 > 10
      if (isMt10M) {
        this.$message.warning('上传音频大小不能超过 10MB!')
        return
      }
      return true
    },
    uploadAudioSuccess(response, file) {
      this.$message.success('上传成功')
      console.log(response, 'audio response')
      console.log(file, 'audio file')
    },
  },
}
</script>
